<template>
<a-drawer
    :destroyOnClose="true"
    :title="title"
    placement="right"
    :closable="true"
    :visible="visible"
    :maskClosable="true"
    :width="width"
    @close="close">
        <a-spin :spinning="confirmLoading">
            <LForm v-if="formAttributes" ref="LForm" :formAttributes="formAttributes" :mostColumns="1" :labelCol="labelCol" :wrapperCol="wrapperCol"></LForm>
        </a-spin>
        

      <div class="drawer-bootom-button" v-if="localIsShowBootomButton">
            <a-button shape="round" @click="close" style="margin-right: .8rem">取消</a-button>
            <a-button shape="round" @click="ok" type="primary" >提交</a-button>
        </div>
    </a-drawer>
    
</template>

<script>
import LForm from '@/components/lt/form/LForm'
import pick from 'lodash.pick'
import request from '@/utils/request'
import moment from 'moment'
import defaultSettings from '@/config/defaultSettings'
let Base64 = require('js-base64').Base64;
export default {
    name:'noticeForm',
    components:{LForm},
    props:{
        labelCol:{
            type:Object,
            default:function(){
                return {sm: { span:2 }}
            }
        },
        wrapperCol:{
            type:Object,
            default:function(){
                return {sm: { span: 22 }}
            }
        },
        isShowBootomButton:{
            type:Boolean,
            default:true
        }
      
    },
    data(){
        return{
            defaultSettings,
            moment,
            title:'详情',
            visible:false,
            width:document.documentElement.clientWidth-208,
            confirmLoading:false,
            localIsShowBootomButton:this.isShowBootomButton,//是否显示提交按钮
            model:{},
            formAttributes:{
              type:'',//collapse,tab
              formItems:[
                {
                  title:'轮播图内容',
                  columns:1,
                  fields:[
                    {field:'bannerImg',label:'图表',component:'imageUp',rules: [{required: true, message: '不能为空'}]},
                    {field:'bannerContent',label:'内容',component:'tinymce',field:'noticeContent', height:500},
                    {field:'isUse',label:'是否可用',component:'select',dictCode:defaultSettings.数据字典.是否,rules: [{required: true, message: '不能为空'}]},
                    {field:'bannerResource',label:'资源',component:'fileUp'},
                    {field:'createTime',label:'添加时间',component:'time',disabled:true},
                  ]
                }
              ],
              

            }
        }
    },
    created(){
    },
    computed:{
       
    },
    watch:{
        
    },
    methods:{
      
        edit (record) {
            this.visible = true;
            this.model = Object.assign({}, record)

            //将this.model 传入编辑器
            this.formAttributes.formItems[0].fields[1]["model"]=this.model
            //将内容传入编辑器
            this.formAttributes.formItems[0].fields[1]["content"] = this.model["noticeContent"]


           
            this.$nextTick(() => {
                this.getForm().setFieldsValue(pick(this.model,'bannerImg','bannerContent','isUse','bannerResource','createTime'))
            })
        },
        ok(){
            let that = this;
            this.getForm().validateFields((err, values) => {
                if (!err) {
                    if(!this.model['noticeContent']){
                        that.$message.warning("内容不能为空");
                        return false
                    }
                    let formData = Object.assign(this.model, values);
                    that.confirmLoading = true
                    request({url: '/NoticeController/save',method: 'post',data: formData}).then((res)=>{
                        if(res.success){
                            that.close()
                            that.$message.success(res.message);
                        }else{
                            that.$message.warning(res.message);
                        }
                    }).finally(() => {
                        that.confirmLoading = false;
                        
                    })
                    
                }
            })

        },
        close () {
            this.$emit('close');
            this.visible = false;
        },
        /**
         * 获取form对象
         */
        getForm(){
            return this.$refs.LForm.form
        },
       
        setIsShowBootomButton(isShow){
            this.localIsShowBootomButton = isShow
        }
    }

}
</script>

<style  scoped>
  .drawer-bootom-button {
    position: absolute;
    bottom: 20;
    width: 100%;
    padding: 10px 16px;
    text-align: right;
    border-top: 1px solid var(--component-border-color) !important;
    left: 0;
    background: var(--drawer-header-background-color) !important;
    border-radius: 0 0 2px 2px;
  }

</style>